<template>
  <div class="hello">
    <h1>InputCounter测试页</h1>
    <input-counter v-model="val" :step="2" :max="50" :min="-5"></input-counter>
    <br>
    <!--<div style="margin:0 auto;padding: 30px 24px; overflow: hidden;">-->
      <!--<span class="demonstration"></span><input-slider v-model="value1" range></input-slider>-->
      <!--<input-slider v-model="value2" :show-input="true"></input-slider>-->
    <!--</div>-->
    <input-rate v-model="value3" :texts="testArray" :show-text="true"></input-rate>
  </div>
</template>

<script>
  import InputCounter from '../../libs/dynamic-form/input-types/InputCounter'
  import InputRate from '../../libs/dynamic-form/input-types/InputRate'
  import InputSlider from '../../libs/dynamic-form/input-types/InputSlider/InputSlider'
  export default {
    components: {
      InputCounter,
      InputSlider,
      InputRate
    },
    created () {
      window.counter = this
    },
    data () {
      return {
        val: 1,
        value1: [20, 60],
        value2: 60,
        value3: null,
        testArray: ['极差', '失望', '一般', '满意', '惊喜']
      }
    },
    methods: {
      inputVal (count) {
        console.log(count)
        this.val = count
        console.log(this)
      },
      changeVal (item) {
        console.log(item)
      }
    }
  }
</script>

<style>
  .demonstration {
    font-size: 14px;
    color: #8492a6;
    line-height: 35px;
  }
</style>
